<template>
	<view class="phone-list-page">
		<view class="phone-list-item" v-for="(item,index) in phoneList" :key="index" @click="goDetail(item,index)">
			<view class="imgBox">
				<view class="name">
					{{item.name}}
				</view>
				<view class="imgMsg"
					:style="{ backgroundImage: 'url(https://api.jingkakeji.com/' + item.images[0] + ')' }"></view>
			</view>
			<view class="text">
				{{item.shorttitle}}
			</view>
			<view class="price">
				￥<span>{{item.min_price}}</span>/天
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: ["phoneList"],
		data() {
			return {}
		},
		methods: {
			goDetail(item, index) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phone-list-page {
		width: 100%;
		column-count: 2;
		column-gap: 10px;
		margin-top: 20rpx;

		.loadingBox {
			width: 200rpx;
			height: 100rpx;
			overflow: auto;
			margin-left: calc(100% - 100rpx);
			margin-top: 50rpx;
		}

		.phone-list-item {
			width: 345rpx;
			background-color: white;
			border-radius: 20rpx;
			align-items: center;
			overflow: auto;
			justify-content: space-around;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.imgBox {
				width: 345rpx;
				height: 345rpx;
				background-image: url("/static/test_img/list-img1.png");
				background-size: cover;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.name {
					width: 180rpx;
					height: 50rpx;
					position: absolute;
					top: 0;
					left: calc(50% - 90rpx);
					text-align: center;
					line-height: 50rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: white;
					text-indent: 10rpx;

				}

				.imgMsg {
					width: 300rpx;
					height: 220rpx;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}

			.text {
				width: 90%;
				font-size: 30rpx;
				word-wrap: break-word;
				margin-top: 20rpx;
			}

			.price {
				width: 90%;
				font-size: 28rpx;
				color: red;
				margin: 20rpx 0px;

				>span {
					font-weight: bold;
					font-size: 36rpx;
				}
			}

		}
	}
</style>